<template>
     <div  class="det-navbar">
     <nav-bar>
      <div slot="nav-left" @click="back" class="img"><img  src="~assets/img/fanhui.png" ></div>
       <div class="navitem" slot="nav-center">
        <div v-for="(item,index) in navitem"
         @click="btnclick(index)" 
         :class="{isactive:currtindex==index}"
         class="item" 
         :key="index+item" >{{item}}</div>
       </div>
     </nav-bar>
     </div>
</template>


<script>

import NavBar from 'components/common/navbar/navbar'
export default {
  name:'childenDetNavBar',
  components: {
    NavBar
  },
  data () {
    return {
      navitem:['商品','参数','评论','推荐'],
      currtindex:0
    }
  
  },
  methods: {
    btnclick(index){
      this.currtindex=index
      this.$emit('btnclick',index)
    },
    back(){
      this.$router.back()
    }
  }
}
</script>

<style  scoped>
  .navitem{
    display: flex;
  }
  .item{
    color: black;
    flex: 1;
  }
  .isactive{
    color: palevioletred;
  }
  .img{
    margin-top: 5px;
    margin-left: 10px;
  }
  .det-navbar{
   background-color: #fff ;
   position: relative;
   z-index: 9;
  }
</style>